<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head>

</h:head>

<h:body>
<div class="card">
    <h:form id="form">
        <p:growl id="msgs" showDetail="true"/>

        <p:dataTable id="items" widgetVar="items" var="item" value="#{dtBasicView.items}"
                     editable="true">
            <f:facet name="header">
                Jakarta EE 10 demo with Primefaces
            </f:facet>

            <p:ajax event="rowEdit" listener="#{dtBasicView.onRowEdit}" update=":form:msgs"/>
            <p:ajax event="rowEditCancel" listener="#{dtBasicView.onRowCancel}" update=":form:msgs"/>

            <p:column headerText="Name">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{item.name}"/></f:facet>
                    <f:facet name="input"><p:inputText value="#{item.name}" style="width:100%"
                                                       label="Name"/></f:facet>
                </p:cellEditor>
            </p:column>

            <p:column headerText="Code">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{item.category}"/></f:facet>
                    <f:facet name="input"><p:inputText id="modelInput" value="#{item.category}"
                                                       style="width:100%"/></f:facet>
                </p:cellEditor>
            </p:column>

            <p:column headerText="Price">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{item.price}"/></f:facet>
                    <f:facet name="input"><p:inputText value="#{item.price}" style="width:100%"
                                                       label="Price"/></f:facet>
                </p:cellEditor>
            </p:column>


            <p:column style="width:6rem">
                <p:rowEditor/>
            </p:column>
        </p:dataTable>

        <div class="grid mt-3">
            <div class="col-12">
                <p:commandButton value="Add new row" process="@this" update=":form:msgs"
                                 action="#{dtBasicView.onAddNew()}" oncomplete="PF('items').addRow();"/>
            </div>
        </div>

    </h:form>
</div>

</h:body>



</html>